<!--
 * @Author: Christion.Young
 * @Date: 2020-11-17 15:28:28
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-01-11 15:43:34
 * @Description: 过滤器主页
-->
<template>
    <div>
        <el-row>
            <el-col>
                <!-- 操作区域 -->
                <upper-template @search="queryBtn"
                                @clear="resetBtn">
                    <!-- 操作按钮区 -->
                    <template slot="buttonArea">
                        <el-button @click="addFunc">新增</el-button>
                        <el-button @click="editFunc">编辑</el-button>
                        <el-button @click="delFunc">删除</el-button>
                        <el-button @click="checkFunc">查看</el-button>
                        <el-button @click="copyFunc">复制</el-button>
                        <el-button @click="_enableFunc">启用</el-button>
                        <el-button @click="_blockUpFunc">停用</el-button>
                    </template>
                    <!-- 搜索区 -->
                    <template slot="searchArea">
                        <el-form :model="searchForm"
                                 ref="searchForm"
                                 label-width="120px"
                                 label-position="left"
                                 size="mini">
                            <el-form-item label="过滤器编码：">
                                <el-input v-model="searchForm.filterCode"></el-input>
                            </el-form-item>
                            <el-form-item label="过滤器名称：">
                                <el-input v-model="searchForm.filterName"></el-input>
                            </el-form-item>
                        </el-form>
                    </template>
                    <!-- 显示隐藏区 -->
                    <template slot="columnHide">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox v-for="item in textData"
                                         :label="item.label"
                                         :key="item.prop">{{ item.label }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </template>
                </upper-template>
                <!-- 列表 -->
                <el-table ref="multipleTable"
                          :data="tableData"
                          @row-click="authorizeFor">
                    <el-table-column width="55"
                                     type="selection"
                                     ></el-table-column>
                    <el-table-column prop="filterCode"
                                     label="过滤器编码"
                                      show-overflow-tooltip 
                                     v-if="columnState[0]">
                    </el-table-column>
                    <el-table-column prop="filterName"
                                     label="过滤器名称"
                                     :show-overflow-tooltip="true"
                                     v-if="columnState[1]">
                    </el-table-column>
                    <el-table-column prop="filterType"
                                     label="过滤器类型"
                                     :formatter="filterTypeFormatter"
                                     v-if="columnState[2]">
                    </el-table-column>
                    <el-table-column prop="status"
                                     label="状态"
                                     :formatter="statusFormatter"
                                     v-if="columnState[3]">
                    </el-table-column>
                    <el-table-column prop="descn"
                                     label="描述"
                                     :show-overflow-tooltip="true"
                                     v-if="columnState[4]">
                    </el-table-column>
                    <el-table-column prop="creator"
                                     label="创建人"
                                     :formatter="row => row.creator || '-'"
                                     v-if="columnState[5]">
                    </el-table-column>
                    <el-table-column prop="createdTm"
                                     label="创建时间"
                                     :formatter="row => row.createdTm ? setCalendarDate(row.createdTm ) : '-'"
                                      show-overflow-tooltip 
                                     v-if="columnState[6]">
                    </el-table-column>
                    <el-table-column prop="modifier"
                                     label="修改人"
                                     :formatter="row => row.modifier || '-'"
                                     v-if="columnState[7]">
                    </el-table-column>
                    <el-table-column prop="modifiedTm"
                                     label="修改时间"
                                      show-overflow-tooltip 
                                     :formatter="row => row.modifiedTm ? setCalendarDate(row.modifiedTm ) : '-'"
                                     v-if="columnState[8]">
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <pagination @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            @refresh="searchFunc"
                            :current-page="searchForm.page"
                            :page-size="searchForm.size"
                            :total="total"></pagination>
            </el-col>
        </el-row>
        <!-- 新增/编辑 -->
        <el-dialog v-dialogDrag
                   :title="saveTitles[saveFlg]+'过滤器'"
                   :visible.sync="addOrEdit"
                   :before-close="beforeCloseBtn"
                   width="704px"
                   top="5%">
            <el-tabs v-model="activeName"
                     @tab-click="tabClickBtn"
                     :before-leave='leaveTab'>
                <!-- 基本信息 -->
                <el-tab-pane label="基本信息"
                             name="basicInformation">
                    <el-form ref="basicInformationForm"
                             :model="basicInformationForm"
                             label-width="100px"
                             label-position="right"
                             :rules="basicInformationRules">
                        <el-form-item label="编码："
                                      prop="filterCode">
                            <el-input v-model="basicInformationForm.filterCode"
                                      disabled></el-input>
                        </el-form-item>
                        <el-form-item label="名称："
                                      prop="filterName">
                            <el-input v-model="basicInformationForm.filterName"
                                      :disabled='examine'></el-input>
                        </el-form-item>
                        <el-form-item label="过滤器类型："
                                      prop="filterType">
                            <el-select v-model="basicInformationForm.filterType"
                                       :disabled='examine'
                                       style="width:560px;"
                                       placeholder="请选择过滤器">
                                <el-option v-for="item in filterTypeOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态："
                                      prop="status">
                            <el-select v-model="basicInformationForm.status"
                                       :disabled='examine'
                                       style="width:560px;"
                                       placeholder="请选择状态">
                                <el-option v-for="item in statusOptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="权限："
                                      prop="ruleType">
                            <el-radio-group v-model="basicInformationForm.ruleType"
                                            :disabled='examine||(saveFlg==2&&readWritePermission==false)'>
                                <el-radio label="0">任何人可读写</el-radio>
                                <el-radio label="1">创建人可读写其他人可读</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="描述："
                                      prop="descn">
                            <el-input type="textarea"
                                      v-model="basicInformationForm.descn"
                                      :disabled='examine'></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <!-- 过滤条件 -->
                <el-tab-pane label="过滤条件"
                             name="filterCondition">
                    <div class="tabBox">
                        <el-form ref="filterConditionForm"
                                 :model="filterConditionForm"
                                 label-position="right"
                                 :rules="filterConditionRules">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="创建方式："
                                                  prop="createWay">
                                        <el-radio-group v-model="filterConditionForm.createWay"
                                                        @change="createWayChange"
                                                        :disabled='examine'>
                                            <el-radio label="1">向导方式</el-radio>
                                            <el-radio label="0">手动输入</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="金融工具表选择："
                                                  prop="financialITS">
                                        <el-select v-model="filterConditionForm.financialITS"
                                                   :disabled='examine'
                                                   style="width:200px;"
                                                   @change="financialITSChange"
                                                   placeholder="请选择金融工具表">
                                            <el-option v-for="item in fundToolTableOptions"
                                                       :key="item.tableId"
                                                       :label="item.tableNameCn"
                                                       :value="item.tableId">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <div class="tabContent">
                        <div class="tabContentTab"
                             v-show="filterConditionForm.createWay==='1'?true:false">
                            <div class="tabContentA">
                                <div class="tabContentAtitle">SQL展示：</div>
                                <div>
                                    <el-input type="textarea"
                                              disabled
                                              v-model="tabContentAdescn">
                                    </el-input>
                                </div>
                                <div class="tabContentAtitle">条件：</div>
                                <div class="tabContentAoperate">
                                    <el-row>
                                        <el-col :span="14">
                                            <el-form ref="operationForm"
                                                     :model="operationForm"
                                                     label-width="84px"
                                                     label-position="right"
                                                     :rules="operationFormRules">
                                                <el-form-item label="字段选择："
                                                              prop="fieldSelection">
                                                    <el-select v-model="operationForm.fieldSelection"
                                                               :disabled='examine'
                                                               @change="fieldSelectionChange"
                                                               placeholder="请选择字段">
                                                        <el-option v-for="item in fieldSelectionOptions"
                                                                   :key="item.columnCn"
                                                                   :label="item.columnCn"
                                                                   :value="item.columnCode">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="操作符："
                                                              prop="operator">
                                                    <el-radio-group v-model="operationForm.operator"
                                                                    @change="operatorChange"
                                                                    :disabled='examine'>
                                                        <el-radio style="margin-right: 4px;"
                                                                  label="in"><span class="spanTXT">包含（in）</span></el-radio>
                                                        <el-radio style="margin-right: 4px;"
                                                                  label="notin"><span class="spanTXT">不包含（not in）</span></el-radio>
                                                        <el-radio v-if="fieldSelectionType==='STRING'?false:true"
                                                                  style="margin-right: 4px;margin-top: 10px;"
                                                                  label="between"><span class="spanTXT">在....之间（between）</span></el-radio>
                                                    </el-radio-group>
                                                </el-form-item>
                                                <el-form-item label="条件输入："
                                                              prop="conditionInput">
                                                    <div v-if="fieldSelectionType==='STRING'?true:false">
                                                        <el-select v-model="operationForm.conditionInput"
                                                                   filterable
                                                                   multiple
                                                                   :disabled='examine'
                                                                   @change="stringChange"
                                                                   placeholder="请选择维度">
                                                            <el-option v-for="item in stringOption"
                                                                       :key="item.columnCn"
                                                                       :label="item.dictItemName"
                                                                       :value="item.dictItemCode">
                                                                <span style="float: left">{{ item.dictItemName }}</span>
                                                                <span style="float: right">{{ item.dictItemCode }}</span>
                                                            </el-option>
                                                        </el-select>
                                                    </div>
                                                    <div v-if="fieldSelectionType==='DATE'?true:false">
                                                        <div v-if="operationForm.operator==='in'?true:false">
                                                            <span class="spanTXT">在</span>
                                                            <el-date-picker v-model="operationForm.conditionInputDATEIn"
                                                                            :disabled='examine'
                                                                            type="date"
                                                                            style="width:130px;"
                                                                            value-format="yyyy-MM-dd"
                                                                            format="yyyy-MM-dd"></el-date-picker>
                                                            <span class="spanTXT">之中</span>
                                                        </div>
                                                        <div v-if="operationForm.operator==='notin'?true:false">
                                                            <span class="spanTXT">不在</span>
                                                            <el-date-picker v-model="operationForm.conditionInputDATENotIn"
                                                                            :disabled='examine'
                                                                            type="date"
                                                                            style="width:130px;"
                                                                            value-format="yyyy-MM-dd"
                                                                            format="yyyy-MM-dd"></el-date-picker>
                                                            <span class="spanTXT">之中</span>
                                                        </div>
                                                        <div v-if="operationForm.operator==='between'?true:false">
                                                            <el-date-picker v-model="operationForm.conditionInputDATEBetween"
                                                                            type="date"
                                                                            style="width:130px;"
                                                                            :disabled='examine'
                                                                            value-format="yyyy-MM-dd"
                                                                            format="yyyy-MM-dd"></el-date-picker>
                                                            <span class="spanTXT">和</span>
                                                            <el-date-picker v-model="operationForm.conditionInputDATEAndBetween"
                                                                            type="date"
                                                                            style="width:130px;"
                                                                            :disabled='examine'
                                                                            value-format="yyyy-MM-dd"
                                                                            format="yyyy-MM-dd"></el-date-picker>
                                                            <span class="spanTXT">之间</span>

                                                        </div>
                                                        <div v-if="operationForm.operator===''?true:false">
                                                            <span class="spanTXT"
                                                                  style="color:red;">(提示：请先选择操作符再操作)</span>
                                                        </div>
                                                    </div>
                                                    <div v-if="fieldSelectionType==='NUMBER'?true:false">
                                                        <div v-if="operationForm.operator==='in'?true:false">
                                                            <span class="spanTXT">在</span>
                                                            <el-input v-model="operationForm.conditionInputNUMBER"
                                                                      :disabled='examine'
                                                                      style="width:130px;"></el-input>
                                                            <span class="spanTXT">之中</span>
                                                        </div>
                                                        <div v-if="operationForm.operator==='notin'?true:false">
                                                            <span class="spanTXT">不在</span>
                                                            <el-input v-model="operationForm.conditionInputNUMBER"
                                                                      :disabled='examine'
                                                                      style="width:130px;"></el-input>
                                                            <span class="spanTXT">之中</span>
                                                        </div>
                                                        <div v-if="operationForm.operator==='between'?true:false">
                                                            <el-input v-model="operationForm.conditionInputNUMBER"
                                                                      :disabled='examine'
                                                                      style="width:130px;"></el-input>
                                                            <span class="spanTXT">和</span>
                                                            <el-input v-model="operationForm.conditionInputNUMBERAnd"
                                                                      :disabled='examine'
                                                                      style="width:130px;"></el-input>
                                                            <span class="spanTXT">之间</span>

                                                        </div>
                                                        <div v-if="operationForm.operator===''?true:false">
                                                            <span class="spanTXT"
                                                                  style="color:red;">(提示：请先选择操作符再操作)</span>
                                                        </div>
                                                    </div>
                                                    <div v-if="operationForm.fieldSelection===''?true:false">
                                                        <span class="spanTXT"
                                                              style="color:red;">(提示：请先选择金融工具表和字段再操作)</span>
                                                    </div>
                                                </el-form-item>
                                                <div class="tabContentBtn">
                                                    <el-button @click="confirmTne"
                                                               :disabled='examine'>校验并增加</el-button>
                                                </div>
                                            </el-form>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-table ref="SQLTable"
                                                      height="200"
                                                      :data="SQLTableData">
                                                <el-table-column prop="conditionFlag"
                                                                 :show-overflow-tooltip="true"
                                                                 align="center"
                                                                 header-align="center"
                                                                 label="描述">
                                                </el-table-column>
                                                <el-table-column prop="sql"
                                                                 :show-overflow-tooltip="true"
                                                                 align="center"
                                                                 header-align="center"
                                                                 label="SQL">
                                                </el-table-column>
                                                <el-table-column prop="operate"
                                                                 align="center"
                                                                 header-align="center"
                                                                 label="操作">
                                                    <template slot-scope="scope">
                                                        <div v-if="!examine"
                                                             style="cursor:pointer"
                                                             @click="pubFiltersqlRemove(scope.row)">删除</div>
                                                        <div v-if="examine"
                                                             style="cursor:pointer">删除</div>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </div>
                        <div class="tabContentTab"
                             v-show="filterConditionForm.createWay==='1'?false:true">
                            <div class="tabContentB">
                                <div class="tabContentBtitle"> 手动输入(示例：month1Val>1000 and month2Val!=2000)：</div>
                                <div>
                                    <el-input type="textarea"
                                              :disabled='examine'
                                              v-model="validateSqlData.sql">
                                    </el-input>
                                </div>
                                <div class="tabContentBtitle">表字段(可单击添加)：</div>
                                <div class="tabContentBoperate">
                                    <el-tag v-for="item in fieldSelectionOptions"
                                            :disabled='examine'
                                            :key="item.columnEn"
                                            style="margin:10px;"
                                            effect="dark"
                                            @click="tagBtn(item.columnEn)">
                                        {{ item.columnEn+'('+ item.columnCn +')' }}
                                    </el-tag>
                                </div>
                            </div>
                            <div class="tabContentBtnX">
                                <el-button @click="confirmTne"
                                           :disabled='examine'>校验并增加</el-button>
                                <el-button @click="emptyBtn"
                                           :disabled='examine'>清空</el-button>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div v-show="activeName==='filterCondition'?false:true"
                 slot="footer">
                <el-button :disabled="examine"
                           @click="confirmTne">确 定</el-button>
                <el-button @click="cancelTne">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { publicManage_dat } from '@/api/index'
import { _debounce, _throttle } from '@/lib/util'
import moment from 'moment'
export default {
    data() {
        return {
            //   列表    ####################################################################################################
            addOrEdit: false,
            total: 50,
            saveFlg: 1,
            saveTitles: ['复制', '新增', '编辑', '查看'],
            searchForm: {
                filterCode: '',
                filterName: '',
                page: 1,
                size: 15,
            },
            checkList: [
                '过滤器编码',
                '过滤器名称',
                '过滤器类型',
                '状态',
                '描述',
                '创建人',
                '创建时间',
                '修改人',
                '修改时间',
            ],
            textData: [
                { prop: 'filterCode', label: '过滤器编码' },
                { prop: 'filterName', label: '过滤器名称' },
                { prop: 'filterType', label: '过滤器类型' },
                { prop: 'status', label: '状态' },
                { prop: 'descn', label: '描述' },
                { prop: 'creator', label: '创建人' },
                { prop: 'createdTm', label: '创建时间' },
                { prop: 'modifier', label: '修改人' },
                { prop: 'modifiedTm', label: '修改时间' },
            ],
            tableData: [],
            //弹出框   ####################################################################################################
            activeName: 'basicInformation',
            //开关
            stopSwitch: false,
            //查看
            examine: false,
            //基本信息-表单
            basicInformationForm: {
                filterCode: '',
                filterName: '',
                filterType: '',
                status: '',
                ruleType: '0',
                descn: '',
            },
            //基本信息-表单校验
            basicInformationRules: {
                filterCode: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                filterName: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                    {
                        pattern: /^[\u4E00-\u9FA5A-Za-z0-9_]{1,40}$/,
                        message: '只能输入1-40位的中文、英文字母、数字、下划线',
                        trigger: 'blur',
                    },
                ],
                filterType: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                status: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                ruleType: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
            },
            //基本信息-表单-过滤器类型-下拉
            filterTypeOptions: [
                {
                    value: '1',
                    label: 'Data Element',
                },
            ],
            //基本信息-表单-状态-下拉
            statusOptions: [
                {
                    value: '1',
                    label: '启用',
                },
                {
                    value: '0',
                    label: '停用',
                },
            ],
            //过滤条件-顶部表单
            filterConditionForm: {
                createWay: '1',
                financialITS: '',
            },
            //过滤条件-顶部表单-检验
            filterConditionRules: {
                createWay: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                financialITS: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
            },
            //过滤条件-顶部表单-金融工具表-下拉
            fundToolTableOptions: [],
            //过滤条件-顶部表单-金融工具表-下拉-选种值
            tableNameEnSave: '',
            //向导方式-SQL展示
            tabContentAdescn: '',
            //向导方式-条件-左侧操作
            operationForm: {
                fieldSelection: '',
                operator: '',
                conditionInput: '',
                conditionInputNUMBER: '',
                conditionInputNUMBERAnd: '',
                conditionInputDATEIn: '',
                conditionInputDATENotIn: '',
                conditionInputDATEBetween: '',
                conditionInputDATEAndBetween: '',
            },
            //向导方式-条件-左侧操作-校验
            operationFormRules: {
                fieldSelection: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
                operator: [
                    {
                        required: true,
                        message: '该输入项为必输项',
                        trigger: 'blur',
                    },
                ],
            },
            //向导方式-条件-左侧操作-字段选择下拉OR手动输入-SQL标签按钮
            fieldSelectionOptions: [],
            //向导方式-条件-左侧操作-字段类型下拉-选中值
            dataTypeSave: '',
            columnEnSave: '',
            colTypeSave: '',
            //向导方式-条件-左侧操作-字段选择下拉-类型
            fieldSelectionType: '',
            //向导方式-条件-左侧操作-维度类型下拉
            stringOption: [],
            //向导方式-条件-左侧操作-维度类型下拉-选中值
            conditionFlagSave: '',
            dimValSave: '',
            //向导方式-条件-右侧表单
            SQLTableData: [],
            //向导输入-保存
            saveNomalData: {
                //金融工具表
                tablenameEn: '',
                //字段
                columnEn: '',
                //维度值
                dimVal: '',
                //手动还是自动
                operate: '',
                //新增为空编辑传值
                filtersqlId: '',
                //过滤器编码
                filtersqlCode: '',
                //操作符
                addFlag: '',
                //日期类型时的值
                conditionFlag: '',
                //SQL类型
                dataType: '',
                //判断是否String
                colType: 'String',
            },
            //手动输入-保存
            validateSqlData: {
                filtersqlCode: '',
                sql: '',
                tablenameEn: '',
            },
            //复制回显ID
            copyFilterId: '',
            copyFilterIdOne: true,
            readWritePermission:false,
            editRow:{}
        }
    },
    created() {
        this.searchFunc()
        this.getFundToolTable()
        this.debounce = _debounce(this.enableFunc, 1000, this)
        this.throttle = _throttle(this.blockUpFunc, 1000, this)
    },
    computed: {
        columnState() {
            let arr = [],
                arr1 = this.textData,
                arr2 = this.checkList
            for (let i = 0; i < arr1.length; i++) {
                let flg = false
                for (let j = 0; j < arr2.length; j++) {
                    if (arr1[i].label === arr2[j]) {
                        flg = true
                    }
                }
                arr.push(flg)
            }
            return arr
        },
    },
    mounted() {},
    watch: {},
    methods: {
        //   列表   ##################################################################################################################
        //   删除
        delFunc() {
            let selection = this.$refs.multipleTable.selection
            if (selection.length < 1) {
                return this.$message.warning('请选择要删除的数据')
            }
            this.$confirm('您确定要删除选中数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    const paramData = []
                    selection.forEach((element) => {
                        paramData.push(element.filterId)
                    })
                    publicManage_dat
                        .pubFilterRemove({ ids: paramData })
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功',
                                })
                                this.searchFunc()
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '删除成功',
                                })
                            }
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        _enableFunc() {
            this.debounce()
        },
        //   启用
        enableFunc() {
            let selection = this.$refs.multipleTable.selection
            if (selection.length != 1) {
                return this.$message.warning('请选择一条数据进行启用！')
            }
            let row = selection[0]
            publicManage_dat
                .pubFilterChangeStatus({
                    ids: [row.filterId],
                    status: '1',
                })
                .then((res) => {
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '已启用！',
                        })
                        this.searchFunc()
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.message||'启用失败',
                        })
                    }
                })
        },
        _blockUpFunc() {
            this.throttle()
        },
        //   停用
        blockUpFunc() {
            let selection = this.$refs.multipleTable.selection
            if (selection.length != 1) {
                return this.$message.warning('请选择一条数据进行停用！')
            }
            let row = selection[0]
            publicManage_dat
                .pubFilterChangeStatus({
                    ids: [row.filterId],
                    status: '0',
                })
                .then((res) => {
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '已停用！',
                        })
                        this.searchFunc()
                    } else {
                        this.$message({
                            type: 'error',
                            message: '停用失败',
                        })
                    }
                })
        },
        //   搜索-确定
        queryBtn() {
            this.searchForm.page = 1
            this.searchFunc()
        },
        //   搜索-重置
        resetBtn() {
            this.searchForm.filterCode = ''
            this.searchForm.filterName = ''
        },
        //   点击行选中
        authorizeFor(row) {
            if (this.$refs.multipleTable) {
                this.$refs.multipleTable.clearSelection()
            }
            this.$refs.multipleTable.toggleRowSelection(row, true)
        },
        //   分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
            this.searchForm.size = val
            this.searchFunc()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
            this.searchForm.page = val
            this.searchFunc()
        },
        //   查询
        searchFunc() {
            publicManage_dat
                .pubFilterQueryForPage(this.searchForm)
                .then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data
                        this.total = res.count
                    } else {
                        this.$message({
                            type: 'error',
                            message: '查询失败',
                        })
                    }
                })
        },
        //   日期数据处理
        setCalendarDate(val) {
            if (val) return moment(val).format('YYYY-MM-DD HH:mm:ss')
            else return '-'
        },
        //   状态数据处理
        statusFormatter(val) {
            if (val.status == '1') return '启用'
            else return '停用'
        },
        //   类型数据处理
        filterTypeFormatter(val) {
            if (val.filterType == '1') return 'Data Element'
            else return '-'
        },
        //   弹窗   ##################################################################################################################
        //   新增
        addFunc() {
            this.saveFlg = 1
            for (let k in this.basicInformationForm) {
                this.basicInformationForm[k] = ''
            }
            this.filterConditionForm.createWay = '1'
            publicManage_dat
                .bizCodeConfigGetBizCodeByName({ bizCode: "'FT'" })

                .then((res) => {
                    if (res.code == 200) {
                        this.basicInformationForm.filterCode = res.message
                    } else {
                        this.$message({
                            type: 'error',
                            message: '获取编码失败',
                        })
                    }
                })

            this.addOrEdit = true
            this.$nextTick(() => {
                this.$refs.basicInformationForm.clearValidate()
            })
            this.tabContentAdescn = ''
            this.SQLTableData = []
            this.validateSqlData.filtersqlCode = ''
            this.validateSqlData.sql = ''
            this.validateSqlData.tablenameEn = ''
            this.basicInformationForm = {
                filterCode: '',
                filterName: '',
                filterType: '1',
                status: '1',
                ruleType: '0',
                descn: '',
            }
        },
        //   编辑
        editFunc() {
            this.saveFlg = 2
            let selection = this.$refs.multipleTable.selection
            if (selection.length != 1) {
                return this.$message.warning('请选择一条数据进行修改')
            }
            let row = selection[0]
            this.editRow = {...row}
            // 检查是否当前用户是这条数据的创建人
            publicManage_dat.loginUserIsCreater({id:row.filterId}).then(res=>{
                if(res.code==200){
                    // 读写权限
                    this.readWritePermission = true
                }else{
                    this.readWritePermission = false
                }
            })
            let form = { ...row }
            this.basicInformationForm = form
            this.basicInformationForm.copyFromFilterId = ''
            this.stopSwitch = true
            this.addOrEdit = true
        },
        //   查看
        checkFunc() {
            this.saveFlg = 3
            let selection = this.$refs.multipleTable.selection
            if (selection.length != 1) {
                return this.$message.warning('请选择一条数据进行查看')
            }
            let row = selection[0]
            let form = { ...row }
            this.basicInformationForm = form
            this.basicInformationForm.copyFromFilterId = ''
            this.stopSwitch = true
            this.examine = true
            this.addOrEdit = true
        },
        //   复制
        copyFunc() {
            this.saveFlg = 0
            let selection = this.$refs.multipleTable.selection
            if (selection.length != 1) {
                return this.$message.warning('请选择一条数据进行复制')
            }
            let row = selection[0]
            this.copyFilterId = selection[0].filterId
            this.copyFilterIdOne = true
            let form = { ...row }
            this.basicInformationForm = form
            this.basicInformationForm.copyFromFilterId = form.filterCode
            this.basicInformationForm.filterId = ''
            this.basicInformationForm.operateType = 'copy'
            publicManage_dat
                 .bizCodeConfigGetBizCodeByName({ bizCode: "'FT'" })
                .then((res) => {
                    if (res.code == 200) {
                        this.basicInformationForm.filterCode = res.message
                    } else {
                        this.$message({
                            type: 'error',
                            message: '获取编码失败',
                        })
                    }
                })
            this.addOrEdit = true
        },
        //   弹出框   ##################################################################################################################
        //   关闭之前触发
        beforeCloseBtn(done) {
            done()
            this.stopSwitch = false
            this.examine = false
            this.activeName = 'basicInformation'
            this.$refs.basicInformationForm.clearValidate()
            //向导方式-条件-左侧操作
            for (let k in this.operationForm) {
                this.operationForm[k] = ''
            }
            //金融工具表选择项默认值
            this.filterConditionForm.financialITS = ''
            //向导方式-条件-左侧操作-字段选择下拉OR手动输入-SQL标签按钮
            this.fieldSelectionOptions = []
            //向导方式-条件-左侧操作-字段类型下拉-选中值
            this.dataTypeSave = ''
            this.columnEnSave = ''
            this.colTypeSave = ''
            //向导方式-条件-左侧操作-字段选择下拉-类型
            this.fieldSelectionType = ''
            //向导方式-条件-左侧操作-维度类型下拉
            this.stringOption = []
            //向导方式-条件-左侧操作-维度类型下拉-选中值
            this.conditionFlagSave = ''
            this.dimValSave = ''
            //向导方式-条件-右侧表单
            this.SQLTableData = []
            //向导输入-保存
            for (let k in this.saveNomalData) {
                this.saveNomalData[k] = ''
            }
            //手动输入-保存
            for (let k in this.validateSqlData) {
                this.validateSqlData[k] = ''
            }
        },
        //   Tab切换守卫钩子
        leaveTab(val, oldVal) {
            if (val === 'filterCondition' && oldVal === 'basicInformation') {
                if (this.stopSwitch) {
                    return true
                } else {
                    this.$message({
                        message: '请先保存基本信息数据！',
                        type: 'warning',
                    })
                    return false
                }
            }
        },
        //   Tab切换
        tabClickBtn(val) {
         
            console.log(val)
            if (val.label == '过滤条件' && this.saveFlg > 1) {
                 // 编辑时在切换到过滤条件先查询是否能修改
                   publicManage_dat.hasAuthority({id:this.editRow.filterId}).then(res=>{
                if(res.code==200){
                      this.getPubFilterFindById(this.basicInformationForm.filterId)
                this.getFielterTable(this.basicInformationForm.filterCode)
                this.resultsDisplay()
                }else{
                    this.$message.error(res.message)
                    this.activeName = 'basicInformation'
                }
            })
              
            }
        },
        //   基本信息保存
        pubFilterSave() {
            this.$refs.basicInformationForm.validate((valid) => {
                if (valid)
                    publicManage_dat
                        .pubFilterSave(this.basicInformationForm)
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '保存成功',
                                })
                                this.searchFunc()
                                this.stopSwitch = true
                                this.activeName = 'filterCondition'
                                if (this.saveFlg == 0 && this.copyFilterIdOne) {
                                    this.getPubFilterFindById(this.copyFilterId)
                                    this.resultsDisplay()
                                    this.getFielterTable(
                                        this.basicInformationForm.filterCode
                                    )
                                    this.copyFilterIdOne = false
                                }
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.message,
                                })
                            }
                        })
            })
        },
        //   自动方式保存
        saveDimFilterSql() {
            if (this.filterConditionForm.createWay == '1')
                this.$refs.filterConditionForm.validate((valid) => {
                    if (valid)
                        this.$refs.operationForm.validate((validOperation) => {
                            if (validOperation) {
                                switch (this.operationForm.operator) {
                                    case 'in':
                                        if (
                                            this.fieldSelectionType === 'DATE'
                                        ) {
                                            this.conditionFlagSave = this.operationForm.conditionInputDATEIn
                                        } else if (
                                            this.fieldSelectionType === 'NUMBER'
                                        ) {
                                            this.conditionFlagSave = this.operationForm.conditionInputNUMBER
                                        } else if (
                                            this.fieldSelectionType === 'STRING'
                                        ) {
                                            this.conditionFlagSave = ''
                                        }
                                        break
                                    case 'notin':
                                        if (
                                            this.fieldSelectionType === 'DATE'
                                        ) {
                                            this.conditionFlagSave = this.operationForm.conditionInputDATENotIn
                                        } else if (
                                            this.fieldSelectionType === 'NUMBER'
                                        ) {
                                            this.conditionFlagSave = this.operationForm.conditionInputNUMBER
                                        } else if (
                                            this.fieldSelectionType === 'STRING'
                                        ) {
                                            this.conditionFlagSave = ''
                                        }
                                        break
                                    case 'between':
                                        if (
                                            this.fieldSelectionType === 'DATE'
                                        ) {
                                            this.conditionFlagSave =
                                                this.operationForm
                                                    .conditionInputDATEBetween +
                                                '@' +
                                                this.operationForm
                                                    .conditionInputDATEAndBetween
                                        } else if (
                                            this.fieldSelectionType === 'NUMBER'
                                        ) {
                                            this.conditionFlagSave =
                                                this.operationForm
                                                    .conditionInputNUMBER +
                                                '@' +
                                                this.operationForm
                                                    .conditionInputNUMBERAnd
                                        }
                                        break
                                    default:
                                        break
                                }
                                this.saveNomalData.addFlag = this.operationForm.operator
                                this.saveNomalData.filtersqlCode = this.basicInformationForm.filterCode
                                this.saveNomalData.tablenameEn = this.tableNameEnSave
                                this.saveNomalData.filtersqlId = this.basicInformationForm.filterId
                                this.saveNomalData.columnEn = this.dataTypeSave
                                this.saveNomalData.dataType = this.columnEnSave
                                this.saveNomalData.colType = this.colTypeSave
                                this.saveNomalData.conditionFlag = this.conditionFlagSave
                                this.saveNomalData.dimVal = this.dimValSave

                                switch (this.fieldSelectionType) {
                                    case 'DATE':
                                        publicManage_dat
                                            .saveNomalFilterSql(
                                                this.saveNomalData
                                            )
                                            .then((res) => {
                                                if (res.code == 200) {
                                                    this.$message({
                                                        type: 'success',
                                                        message: '保存成功',
                                                    })
                                                    this.resultsDisplay()
                                                } else {
                                                    this.$message({
                                                        type: 'error',
                                                        message: res.message||'保存失败',
                                                    })
                                                }
                                            })
                                        break
                                    case 'NUMBER':
                                        publicManage_dat
                                            .saveNomalFilterSql(
                                                this.saveNomalData
                                            )
                                            .then((res) => {
                                                if (res.code == 200) {
                                                    this.$message({
                                                        type: 'success',
                                                        message: '保存成功',
                                                    })
                                                    this.resultsDisplay()
                                                } else {
                                                    this.$message({
                                                        type: 'error',
                                                        message: res.message||'保存失败',
                                                    })
                                                }
                                            })
                                        break
                                    case 'STRING':
                                        this.saveNomalData.operate =
                                            this.operationForm.operator == 'in'
                                                ? '1'
                                                : '0'
                                        publicManage_dat
                                            .saveDimFilterSql(
                                                this.saveNomalData
                                            )
                                            .then((res) => {
                                                if (res.code == 200) {
                                                    this.$message({
                                                        type: 'success',
                                                        message: '保存成功',
                                                    })
                                                    this.resultsDisplay()
                                                } else {
                                                    this.$message({
                                                        type: 'error',
                                                        message: res.message||'保存失败',
                                                    })
                                                }
                                            })
                                        break
                                    default:
                                        break
                                }
                            }
                        })
                })
        },
        //   手动方式保存
        validateSqlFormat() {
            if (
                this.validateSqlData.sql !== '' &&
                this.filterConditionForm.createWay == '0'
            ) {
                this.validateSqlData.filtersqlCode = this.basicInformationForm.filterCode
                this.validateSqlData.tablenameEn = this.tableNameEnSave
                publicManage_dat
                    .validateSqlFormat(this.validateSqlData)
                    .then((res) => {
                        if (res.code == 200) {
                            if (res.success) {
                                this.$message({
                                    type: 'success',
                                    message: res.message,
                                })
                                this.resultsDisplay()
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.message,
                                })
                            }
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.message||'保存失败',
                            })
                        }
                    })
            }
        },
        //   新增编辑-确定
        confirmTne() {
            console.log(this.saveNomalData, 'this.saveNomalData')
            
            console.log(this.activeName, 'this.activeName')
            switch (this.activeName) {
                case 'basicInformation':
                    this.pubFilterSave()
                    break
                case 'filterCondition':
                    if(this.filterConditionForm.createWay=='1'&& this.conditionFlagSave == ''&& this.dimValSave==''){
                        this.$message({
                         type: 'warning',
                            message: '请输入条件',
                         })
                         return;
                    }
                     if(this.filterConditionForm.createWay =='0'&&this.validateSqlData.sql==''){
                        this.$message({
                         type: 'warning',
                            message: '请按照示例输入条件',
                         })
                         return;
                    }
                    this.validateSqlFormat()
                    this.saveDimFilterSql()
                    break
                default:
                    this.$message({
                        type: 'warning',
                        message: '请选择创建方式！',
                    })
                    break
            }
            this.operatorChange();
            this.conditionFlagSave ='';
            this.dimValSave='';
            this. saveNomalData={
                //金融工具表
                tablenameEn: '',
                //字段
                columnEn: '',
                //维度值
                dimVal: '',
                //手动还是自动
                operate: '',
                //新增为空编辑传值
                filtersqlId: '',
                //过滤器编码
                filtersqlCode: '',
                //操作符
                addFlag: '',
                //日期类型时的值
                conditionFlag: '',
                //SQL类型
                dataType: '',
                //判断是否String
                colType: 'String',
            };
        },
        //   新增编辑-取消
        cancelTne() {
            this.addOrEdit = false
            this.stopSwitch = false
            this.examine = false
            this.activeName = 'basicInformation'
            this.$refs.basicInformationForm.clearValidate()
        },
        //   过滤条件-手动-清空SQL
        emptyBtn() {
            this.validateSqlData.sql = ''
        },
        //   过滤条件-顶部切换手动/自动
        createWayChange(val) {
            publicManage_dat
                .pubFilterAlterGenWay({
                    filterCode: this.basicInformationForm.filterCode,
                    isNavigator: val,
                })
                .then((res) => {
                    if (res.code == 200) {
                        console.log(res)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '切换手动/自动失败',
                        })
                    }
                })
        },
        //   手动输入-SQL标签按钮
        tagBtn(val) {
            let str = ''
            str = this.validateSqlData.sql.concat(val)
            this.validateSqlData.sql = str
        },
        //   过滤条件-顶部表单-金融工具表-下拉-选中触发
        financialITSChange(val) {
            //获取字段下拉列表
            publicManage_dat
                .fundToolTableColumnQueryList({ tableId: val })
                .then((res) => {
                    if (res.code == 200) {
                        this.fieldSelectionOptions = res.datas
                    } else {
                        this.$message({
                            type: 'error',
                            message: '获取字段下拉列表失败',
                        })
                    }
                })
            //获取选中-tableNameEn-值
            let arr = []
            arr = this.fundToolTableOptions.filter((item) => {
                return item.tableId === val
            })
            this.tableNameEnSave = arr[0].tableNameEn
            //切换清空SQL数据接口
            publicManage_dat
                .pubFiltersqlClearFielterSql({
                    filtersqlCode: this.basicInformationForm.filterCode,
                    isNavigator: this.filterConditionForm.createWay,
                })
                .then((res) => {
                    if (res.code == 200) {
                        console.log(res)
                        this.resultsDisplay()
                    } else {
                        this.$message({
                            type: 'error',
                            message: '清空SQL数据接口失败',
                        })
                    }
                })
            //重置下方操作区
            for (let k in this.operationForm) {
                this.operationForm[k] = ''
            }
        },
        //   过滤条件-顶部表单-金融工具表-下拉数据
        getFundToolTable() {
            publicManage_dat.fundToolTableQueryList().then((res) => {
                if (res.code === 200) {
                    this.fundToolTableOptions = res.datas
                } else {
                    this.$message({
                        type: 'error',
                        message: '获取金融工具表下拉数据失败',
                    })
                }
            })
        },
        //   过滤条件-字段选择-下拉数据选中触发
        fieldSelectionChange(val) {
            //获取下拉选中数据值
            let arr = []
            arr = this.fieldSelectionOptions.filter((item) => {
                return item.columnCode === val
            })
            let str = arr[0].dataType.toLocaleLowerCase()
            this.dataTypeSave = arr[0].columnEn
            this.columnEnSave = arr[0].dataType
            switch (str) {
                case 'char':
                    this.fieldSelectionType = 'STRING'
                    this.colTypeSave = 'String'
                    break
                case 'date':
                    this.fieldSelectionType = 'DATE'
                    this.colTypeSave = 'String'
                    break
                case 'number':
                    this.fieldSelectionType = 'NUMBER'
                    this.colTypeSave = 'notString'
                    break
                case 'numeric':
                    this.fieldSelectionType = 'NUMBER'
                    this.colTypeSave = 'notString'
                    break
                case 'decimal':
                    this.fieldSelectionType = 'NUMBER'
                    this.colTypeSave = 'notString'
                    break
                case 'varchar2':
                    this.fieldSelectionType = 'STRING'
                    this.colTypeSave = 'String'
                    break
                case 'varchar':
                    this.fieldSelectionType = 'STRING'
                    this.colTypeSave = 'String'
                    break
                default:
                    break
            }
            //获取维度列表
            if (this.fieldSelectionType === 'STRING') {
                let relatedDimensionCode = arr[0].relatedDimensionCode
                    ? arr[0].relatedDimensionCode
                    : ''
                console.log(relatedDimensionCode)
                publicManage_dat
                    .queryByRelatedDicttypeCode({
                        dictCode: relatedDimensionCode,
                        pageNo: 1,
                        pageSize: 999999,
                    })
                    .then((res) => {
                        if (res.code == 200) {
                            this.stringOption = res.data
                        } else {
                            this.$message({
                                type: 'error',
                                message: '获取维度列表数据失败',
                            })
                        }
                    })
            } else {
                this.stringOption = []
            }
            //清除操作符/条件输入
            this.operationForm.conditionInput = ''
            this.operationForm.conditionInputNUMBER = ''
            this.operationForm.conditionInputNUMBERAnd = ''
            this.operationForm.conditionInputDATEIn = ''
            this.operationForm.conditionInputDATENotIn = ''
            this.operationForm.conditionInputDATEBetween = ''
            this.operationForm.conditionInputDATEAndBetween = ''
            this.dimValSave = ''
        },
        //   过滤条件-维度选择-下拉数据选中触发
        stringChange(val) {
            this.dimValSave = val.join(',')
        },
        //   过滤条件-操作符-切换清空值
        operatorChange() {
            this.operationForm.conditionInput = ''
            this.operationForm.conditionInputNUMBER = ''
            this.operationForm.conditionInputNUMBERAnd = ''
            this.operationForm.conditionInputDATEIn = ''
            this.operationForm.conditionInputDATENotIn = ''
            this.operationForm.conditionInputDATEBetween = ''
            this.operationForm.conditionInputDATEAndBetween = ''
        },
        //   回显-是手动还是自动
        getPubFilterFindById(val) {
            publicManage_dat.pubFilterFindById({ id: val }).then((res) => {
                if (res.code === 200) {
                    console.log(res)
                    this.filterConditionForm.createWay = res.data.isNavigator
                } else {
                    this.$message({
                        type: 'error',
                        message: res.message||'请求回显手动/自动接口失败',
                    });
                    this.stopSwitch = false
                    this.activeName = 'basicInformation'

                }
            })
        },
        //   回显-金融工具表下拉值
        getFielterTable(val) {
            publicManage_dat
                .getFielterTable({ filtersqlCode: val })
                .then((res) => {
                    if (res.code === 200) {
                        this.tableNameEnSave = res.message
                        let arr = []
                        arr = this.fundToolTableOptions.filter((item) => {
                            return item.tableNameEn === res.message
                        })
                        let str =arr[0]? arr[0].tableId:""
                        this.filterConditionForm.financialITS = str
                        if (this.filterConditionForm.financialITS != '') {
                            this.getFieldSelectionOptions(str)
                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: '回显金融工具表下拉值失败',
                        })
                    }
                })
        },
        //   回显-字段下拉数据
        getFieldSelectionOptions(val) {
            //获取字段下拉列表
            publicManage_dat
                .fundToolTableColumnQueryList({ tableId: val })
                .then((res) => {
                    if (res.code == 200) {
                        this.fieldSelectionOptions = res.datas
                    } else {
                        this.$message({
                            type: 'error',
                            message: '获取字段下拉列表失败',
                        })
                    }
                })
        },
        //   过滤条件-获取SQL展示
        getPubFiltersqlById(val) {
            publicManage_dat
                .getPubFiltersqlById({
                    filtersqlCode: this.basicInformationForm.filterCode,
                    isNavigator: val,
                })
                .then((res) => {
                    if (res.code == 200) {
                        this.tabContentAdescn = ''
                        this.validateSqlData.sql = ''
                        switch (val) {
                            case '1':
                                this.tabContentAdescn = res.data
                                break
                            case '0':
                                this.validateSqlData.sql = res.data
                                break
                            default:
                                break
                        }
                    } else {
                        this.$message({
                            type: 'error',
                            message: '获取SQL展示值失败',
                        })
                    }
                })
        },
        //   过滤条件-获取列表展示
        queryForPageWithParams() {
            publicManage_dat
                .queryForPageWithParams({
                    filtersqlCode: this.basicInformationForm.filterCode,
                })
                .then((res) => {
                    if (res.code == 200) {
                        this.SQLTableData = res.data
                    } else {
                        this.$message({
                            type: 'error',
                            message: '获取列表展示数据失败',
                        })
                    }
                })
        },
        //   过滤条件-获取列表展示-删除
        pubFiltersqlRemove(val) {
            this.$confirm('您确定要删除此条数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    publicManage_dat
                        .pubFiltersqlRemove({
                            ids: [val.filtersqlId],
                        })
                        .then((res) => {
                            if (res.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功',
                                })
                                this.getPubFiltersqlById(
                                    this.filterConditionForm.createWay
                                )
                                this.queryForPageWithParams(
                                    this.filterConditionForm.createWay
                                )
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '删除成功',
                                })
                            }
                        })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        //   结果展示
        resultsDisplay() {
            switch (this.filterConditionForm.createWay) {
                case '0':
                    this.getPubFiltersqlById('0')
                    break
                case '1':
                    this.queryForPageWithParams()
                    this.getPubFiltersqlById('1')
                    break
                default:
                    break
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.tabBox {
    background: #f5f5f5;
    width: 660px;
    height: 34px;
    border-radius: 4px;
}
.tabContent {
    width: 660px;
    .tabContentTab {
        width: 100%;
        .tabContentA {
            .tabContentAtitle {
                background: #f5f5f5;
                width: 660px;
                height: 34px;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 900;
                line-height: 34px;
                margin-top: 20px;
                margin-bottom: 5px;
                padding-left: 10px;
            }
            .tabContentAoperate {
                width: 660px;
                height: 200px;
            }
        }
        .tabContentB {
            .tabContentBtitle {
                background: #f5f5f5;
                width: 660px;
                height: 34px;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 900;
                line-height: 34px;
                margin-top: 20px;
                margin-bottom: 5px;
                padding-left: 10px;
            }
            .tabContentBoperate {
                width: 660px;
                margin-bottom: 10px;
            }
        }
    }
}
.tabContentBtn {
    width: 330px;
    display: flex;
    justify-content: space-evenly;
}
.tabContentBtnX {
    width: 100%;
    display: flex;
    justify-content: center;
}
.spanTXT {
    font-size: 12px;
}
</style>
